<template>
  <el-container class="panel-block coupon-select">
    <el-main class="coupon-main">
      <el-table
        class="sa-table"
        :data="table.data"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="modal?.params?.multiple" type="selection" />
        <el-table-column label="优惠券名称" min-width="128">
          <template #default="scope">
            <div class="sa-table-line-1">
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" min-width="74">
          <template #default="scope">
            <div class="sa-table-line-1">
              {{ scope.row.type_text }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="可用范围" min-width="88">
          <template #default="scope">
            <div class="sa-table-line-1">
              {{ scope.row.use_scope_text }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="优惠内容" min-width="154">
          <template #default="scope">
            <div class="sa-table-line-1">
              {{ scope.row.amount_text }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="领取状态" min-width="80">
          <template #default="scope">
            <el-popover
              placement="bottom"
              title="优惠券有效期"
              trigger="hover"
              popper-class="sa-popper"
            >
              <template #reference>
                <div
                  class="sa-table-line-1 get-time-text"
                  :class="
                    scope.row.get_time_text == '发放中'
                      ? 'success'
                      : scope.row.get_time_text == '已结束'
                      ? 'sa-delete'
                      : 'info'
                  "
                >
                  {{ scope.row.get_time_text }}
                </div>
              </template>
              <div v-if="scope.row.use_time_type == 'days'">
                领取{{ scope.row.start_days }}天后生效，有效期{{ scope.row.days }}天
              </div>
              <div v-if="scope.row.use_time_type == 'range'">
                <div>开始时间：{{ scope.row.use_start_time }}</div>
                <div>结束时间：{{ scope.row.use_end_time }}</div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="剩余" min-width="88">
          <template #default="scope">
            <div class="sa-table-line-1">
              {{ scope.row.stock }}
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!modal?.params?.multiple" label="操作" min-width="88">
          <template #default="scope">
            <el-button class="is-link" type="primary" @click="modalCallBack(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="sa-footer--submit sa-flex sa-row-between sa-flex-wrap">
      <el-pagination
        v-if="pageData"
        @size-change="changeSize"
        @current-change="changeCurrent"
        v-model:currentPage="pageData.page"
        :page-sizes="[10, 50, 100]"
        :page-size="pageData.list_rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        :pager-count="5"
      ></el-pagination>
      <el-button v-if="modal?.params?.multiple" type="primary" @click="confirm">确定</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'CouponSelect',
  };
</script>

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from './coupon.service';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
      default: {
        params: {
          multiple: false,
        },
      },
    },
  });

  // 表格
  const table = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });
  const loading = ref(true);
  // 获取数据
  async function getData() {
    loading.value = false;
    let search = {};
    if (props.modal?.params?.status) {
      search = JSON.stringify({ status: [props.modal.params.status] });
    }
    const { data } = await api.select({
      page: pageData.page,
      list_rows: pageData.list_rows,
      order: table.order,
      sort: table.sort,
      search: search,
    });
    table.data = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    loading.value = false;
  }

  // 分页
  const pageData = reactive({
    page: 1,
    list_rows: 10,
    total: 0,
  });

  // 选择分页数量
  function changeSize(list_rows) {
    pageData.list_rows = list_rows;
    getData();
  }
  // 选择分页
  function changeCurrent(page) {
    pageData.page = page;
    getData();
  }

  function handleSelectionChange(val) {
    table.selected = val;
  }

  function confirm() {
    emit('modalCallBack', { event: 'confirm', data: table.selected });
  }

  function modalCallBack(data) {
    emit('modalCallBack', { event: 'confirm', data });
  }

  onMounted(() => {
    getData();
  });
</script>
<style lang="scss" scoped>
  .success {
    color: #52c41a;
  }

  .info {
    color: #999999;
  }
</style>
